<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jenkins-projects</title>
    <style>
        body {
            background-color: black;
        }

        .project {
            display: inline-block;
            margin: 5px;
            background-color: gainsboro;
            width: 200px;
            font-size: 23px;
        }

        .branch {
            display: block;
            height: 50px;
        }

        .branch div {
            color: white;
        }
    </style>
</head>

<body>

    <h5 style="color: white">没有项目~</h5>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        var projectTemp = `
    <div class="project">
        <div class="title">#title</div>
        #branch
    </div>`;
        var branchTemp = `
        <div class="branch" style="background-color: #color">
            <div>#branchName</div>
        </div>`;

        function getTemp(src) {
            return src.substring(0);
        }

        function getJobColor(color) {
            if (color == "blue") {
                return "green";
            } else if (color == "red") {
                return "red";
            } else {
                return "orange";
            }

        }

        function FreshJobsStatus() {



            //后台取值
            $.ajax({
                url: "jobs",
                success: function (data) {
                    var renderHTML = "";
                    console.log(data);
                    var jenkins = JSON.parse(data);
                    for (var i = 0; i < jenkins.jobs.length; i++) {
                        var job = jenkins.jobs[i];
                        var jobStr = getTemp(projectTemp);
                        var branchStr = "";
                        jobStr = jobStr.replace("#title", job.displayName)
                        if (job.jobs) {
                            for (var j = 0; j < job.jobs.length; j++) {
                                var subJob = job.jobs[j];
                                var branch = getTemp(branchTemp);
                                branch = branch.replace("#color", getJobColor(subJob.color));
                                branch = branch.replace("#branchName", subJob.name);
                                branchStr += branch;
                            }
                        } else {
                            var branch = getTemp(branchTemp);
                            branch = branch.replace("#color", getJobColor(job.color));
                            branch = branch.replace("#branchName", "无分支");
                            branchStr += branch;
                        }
                        jobStr = jobStr.replace("#branch", branchStr)
                        renderHTML += jobStr;
                    }
                    $("body").html(renderHTML);
                }
            });
        }
        //定时刷新
        FreshJobsStatus();

        setInterval(FreshJobsStatus, 1000 * 60 * 10)
    </script>
</body>

</html>